@charset "utf-8";
@import "reset";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    >header {
        width: 100%;
        height: r(86);
        position: absolute;
        top: 0;
        background: #f7f7f7;
        border-bottom: r(1) solid #c1c1c1;
        padding: 0 r(20);
        .img{
            margin-top: r(20);
            float: left;
            width: r(22);
            height: r(37);
            img{
                width: 100%;
                height: 100%;
            }
        }
        p {
            width: 50%;
            margin: 0 auto;
            text-align: center;
            height: r(86);
            line-height: r(86);
            font-size: r(35);
            color: #333333;
        }
    }
    
    #big1,#big2 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        display: none;
        .click {
            position: absolute;
            top: r(218);
            left: r(45);
            width: r(550);
            height: r(300);
            margin: 0 auto;
            background: #f8f8f8;
            border-radius: r(15);
            z-index: 999;
            padding-top: r(60);
            p {
                width: 100%;
                margin: 0 auto;
                text-align: center;
                font-size: r(30);
                color: #666666;
            }
            form {
                margin-top: r(60);
                width: 100%;
                text-align: center;
                hr {
                    width: r(500);
                    margin: 0 auto;
                    margin-bottom: r(33);
                }
                input[type="button"] {
                    width: r(235);
                    height: r(80);
                    background: #ffffff;
                    border: r(1) solid #b7b7b7;
                    border-radius: r(10);
                    font-size: r(30);
                    color: #666666;
                    text-align: center;
                }
                input:last-child{
                    background: #d62d31;
                    color: #ffffff;
                    margin-left: r(30);
                    border: r(1) solid #be0130;
                }
            }
        }
    }
    #big2{
        .click{
            padding-top: r(25);
            p{
                margin-bottom: r(10);
            }
            form{
                margin-top: r(40);
            }
        }
    }
    
    section {
        width: 100%;
        position: absolute;
        top: r(86);
        bottom: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .type{
            width: 100;
            height: r(95);
            line-height: r(95);
            margin-left: r(20);
            padding-right: r(20);
            border-bottom: r(1) solid #e1e2e4;
            p{
                font-size: r(26);
                color: #333333;
            }
            p:last-child{
                color: #cccccc;
                a{
                    display: inline-block;
                    height: r(94);
                    color: #a8a9ab;
                }
            }
        }
        .t4{
            border-bottom: 0;
        }
        .foot{
            width: 100%;
            height: r(628);
            padding-top: r(41);
            background: #f3f4f6;
            text-align: center;
            border-top: 1px solid #e1e2e4;
            a{
                display: inline-block;
                width: r(560);
                height: r(80);
                background: #cc3333;
                line-height: r(80);
                border-radius: r(6);
                text-align: center;
                font-size: r(35);
                color: #FFFFFF;
            }
        }
    }
}